/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  darkMode: 'class',
  theme: {
    extend: {
      fontFamily: {
        'sans': ['Noto Sans SC', 'sans-serif']
      },
      colors: {
        'tech-blue': '#00d4ff',
        'tech-purple': '#8b5cf6',
        'tech-green': '#10b981',
        'neon-blue': '#00d4ff',
        'neon-purple': '#a855f7',
        'neon-green': '#34d399',
        'cyber-dark': '#0f0f23',
        'cyber-darker': '#16213e',
        'cyber-darkest': '#1a1a2e'
      },
      animation: {
        'glow': 'glow 2s ease-in-out infinite alternate',
        'fadeIn': 'fadeIn 0.5s ease-in-out',
        'slideIn': 'slideIn 0.3s ease-out',
        'cyberpunk': 'cyberpunk 4s ease infinite',
        'data-flow': 'data-flow 3s linear infinite',
        'tech-move': 'tech-move 1s linear infinite',
        'radar': 'radar 2s linear infinite',
        'scan': 'scan 4s linear infinite',
        'float': 'float 20s infinite linear'
      },
      keyframes: {
        glow: {
          'from': { boxShadow: '0 0 5px #00d4ff, 0 0 10px #00d4ff, 0 0 15px #00d4ff' },
          'to': { boxShadow: '0 0 10px #00d4ff, 0 0 20px #00d4ff, 0 0 30px #00d4ff' }
        },
        fadeIn: {
          'from': { opacity: '0', transform: 'translateY(10px)' },
          'to': { opacity: '1', transform: 'translateY(0)' }
        },
        slideIn: {
          'from': { transform: 'translateX(-20px)', opacity: '0' },
          'to': { transform: 'translateX(0)', opacity: '1' }
        },
        cyberpunk: {
          '0%': { backgroundPosition: '0% 50%' },
          '50%': { backgroundPosition: '100% 50%' },
          '100%': { backgroundPosition: '0% 50%' }
        },
        'data-flow': {
          '0%': { transform: 'translateX(-100px)' },
          '100%': { transform: 'translateX(100px)' }
        },
        'tech-move': {
          '0%': { backgroundPosition: '0 0' },
          '100%': { backgroundPosition: '30px 0' }
        },
        radar: {
          '0%': {
            transform: 'scale(0.95)',
            boxShadow: '0 0 0 0 rgba(16, 185, 129, 0.7)'
          },
          '70%': {
            transform: 'scale(1)',
            boxShadow: '0 0 0 10px rgba(16, 185, 129, 0)'
          },
          '100%': {
            transform: 'scale(0.95)',
            boxShadow: '0 0 0 0 rgba(16, 185, 129, 0)'
          }
        },
        scan: {
          '0%': { transform: 'rotate(0deg)' },
          '100%': { transform: 'rotate(360deg)' }
        },
        float: {
          '0%': { transform: 'translate(0%, 0%) rotate(0deg)' },
          '25%': { transform: 'translate(-50%, -50%) rotate(90deg)' },
          '50%': { transform: 'translate(-100%, -100%) rotate(180deg)' },
          '75%': { transform: 'translate(-50%, -50%) rotate(270deg)' },
          '100%': { transform: 'translate(0%, 0%) rotate(360deg)' }
        }
      },
      backdropBlur: {
        xs: '2px'
      }
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
  ],
}